import React, { PureComponent, memo } from 'react'

// Header

const MemoHeader = memo(function Header() {
  console.log("Header被调用")
  return <h2>header组件</h2>
})


// main
class Banner extends PureComponent {
  render() {
    console.log("Banner被调用")
    return <i>banner组件</i>
  }
}
function ProductList() {
  return (
    <ul>
      <li>商品列表1</li>
      <li>商品列表2</li>
      <li>商品列表3</li>
      <li>商品列表4</li>
      <li>商品列表5</li>
    </ul>
  )
}

class Main extends PureComponent {
  render() {
    console.log("Main被调用")
    return (
      <h2>
        <Banner/>
        <ProductList/>
      </h2>
    )
  }
}

// Header
function Footer() {
  console.log("Footer被调用")
  return <h2>footer组件</h2>
}

export default class App extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      counter: 0
    }
  }

  render() {
    console.log("App被调用")
    return (
      <div>
        <h2>当前计数: {this.state.counter}</h2>
        <button onClick={() => { this.increment() }}>+1</button>
        <MemoHeader/>
        <Main></Main>
        <Footer></Footer>
      </div>
    )
  }

  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
}


